<template>
    <div class="pageCon">

        <div class="title">山东订购会</div>

        <div class="dataBox">
            <div>
                <span>{{ moneyTotal }}</span>
                <span>订购金额</span>
            </div>
            <div>
                <span>{{ areaNum }}/{{ totalArea }}</span>
                <span>已订购</span>
            </div>
            <div>
                <span>{{ userList.length }}</span>
                <span>订购人数</span>
            </div>
        </div>
        <div class="ordertitle">订购详情</div>

        <div class="listBox" name="listBox">
            <div v-for="(item, index) in userList" :key="index">
                <span>{{ index + 1 < 10 ? '0' + (index + 1) : index + 1 }}</span>
                        <span>{{ item.userName }}</span>已经锁定<span>{{ item.areaNum }}</span>个县，交付<span>{{ item.totalMoney
                            }}元</span>
            </div>
        </div>
        <div class="mapBox">
            <div v-for="(item, index) in areaList" :key="index" :class="item.userName ? 'activeBox' : ''">
                {{ item.userName ? item.userName : item.provinceName }}
            </div>
            <!-- <div class="box2"></div> -->

        </div>


        <div class="erCode">


        </div>


        <div class="popBox" v-if="showPop">
            <div>用户信息</div>
            <div class="diaMain">
                <div>
                    姓名
                    <span>{{ showUser.userName }}</span>
                </div>
                <div>
                    电话
                    <span>{{ showUser.userTel }}</span>
                </div>
                <div>
                    锁定地点
                    <span>{{ showUser.areaStr }}</span>
                </div>
                <div>
                    支付金额
                    <span>{{ showUser.totalMoney }}</span>
                </div>
            </div>
        </div>

    </div>
</template>
<script>


import '../../utils/lib-flexible2'


import { listTotal, listProvince } from '../../network/meeting'
let showTimer;
export default {
    name: 'couInfo',
    data() {
        return {
            showPop: false,
            showUser: '',
            showUserList: [],
            isShowNum: 0,
            num: 0,
            userList: [],

            areaList: [],

            areaNum: 0,
            totalArea: 0,
            moneyTotal: 0,
        }
    },
    created() {
        this.getData()
        this.openWeb()

        if (localStorage.buyUserList) {
            this.userList = JSON.parse(localStorage.buyUserList)
        }
        this.areaNum = 0
        this.userList.forEach(ele => {
            ele.ids = ele.areaIds.split(',')
            ele.areaNum = ele.areaStr.split(',').length
            this.areaNum += ele.areaNum
        })
        console.log(this.userList);

        // this.showUser = this.userList[0]
    },
    mounted() {
        this.updateScrollTop();
    },
    methods: {

        getData() {
            listTotal({
                provinceId: 1
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.totalArea = res.data.totalArea
                    this.moneyTotal = res.data.moneyTotal
                }
            })

            listProvince({
                provinceId: 1
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    res.data.forEach(ele => {
                        ele.userName = ''
                        if (this.userList.length != 0) {
                            this.userList.forEach(item => {
                                item.ids.forEach(id => {
                                    if (id == ele.provinceId) {
                                        ele.userName = item.userName
                                    }
                                })
                            })
                        }
                    })




                    this.areaList = res.data

                    console.log(this.areaList);

                }
            })

        },



        openWeb() {
            if (typeof WebSocket == "undefined") {
                console.log("您的浏览器不支持WebSocket");
            } else {
                console.log("您的浏览器支持WebSocket");

                var socketUrl = "http://192.168.0.103:2022/activity/" + 1;
                // socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
                console.log(socketUrl);
                if (this.socket != null) {
                    this.socket.close();
                    this.socket = null;
                }
                //打开事件
                this.socket = new WebSocket(socketUrl);
                //打开事件
                this.socket.onopen = function () {
                    console.log("websocket已打开");
                };
                var _this = this;
                //获得消息事件
                _this.socket.onmessage = function (msg) {
                    console.log(msg.data);
                    if (msg.data == "连接成功") {
                        _this.$message({
                            type: "success",
                            duration: 500,
                            offset: "400",
                            message: "连接成功",
                        });
                    }
                    if (msg.data != "连接成功") {
                        var data = JSON.parse(msg.data);
                        console.log(data);

                        _this.moneyTotal += data.totalMoney
                        var arr = data.areaIds.split(',')
                        console.log(arr);
                        _this.areaNum += arr.length
                        data.areaNum = arr.length

                        arr.forEach(item => {
                            _this.areaList.forEach(ele => {
                                if (item == ele.provinceId) {
                                    ele.userName = data.userName
                                }
                            })
                        })

                        if (localStorage.buyUserList) {
                            var list = JSON.parse(localStorage.buyUserList)
                            list.push(data)
                        }

                        _this.userList.push(data);
                        localStorage.buyUserList = JSON.stringify(_this.userList);


                        _this.showUserList.push(data);
                        console.log(_this.isShowNum);
                        if (_this.isShowNum == 0) {
                            _this.showUser = _this.showUserList[0];
                            _this.showPop = true;
                            _this.isShowNum = 1;
                            _this.loops();
                        }

                    }
                    //发现消息进入    开始处理前端触发逻辑
                };
                //关闭事件
                this.socket.onclose = function () {
                    console.log("websocket已关闭");
                };
                //发生了错误事件
                this.socket.onerror = function () {
                    _this.$message.warning("连接失败");
                    console.log("websocket发生了错误");
                };
            }
        },





        loops() {
            showTimer = setInterval(() => {
                console.log(this.num);
                console.log(this.showUserList.length - 1);
                if (this.num >= this.showUserList.length - 1) {
                    clearInterval(showTimer);
                    this.num = 0;
                    this.isShowNum = 0;
                    this.showUserList = [];
                    this.showPop = false;
                    this.showUser = "";
                    console.log('停止了');
                } else {
                    this.num++;
                }
                this.showUser = this.showUserList[this.num];
            }, 4000);
        },
        //元素滚动
        updateScrollTop() {
            const scrollList = document.getElementsByName("listBox");
            for (let i = 0; i < scrollList.length; i++) {
                const x = scrollList[i];
                this.scrollThen(x).then();
            }
        },
        async scrollThen(x) {
            do {
                await new Promise((resolve) => {
                    setTimeout(() => {
                        resolve();
                    }, 20);
                });
                // 判断滚动距离
                // console.log(x.clientHeight);
                // console.log(x.scrollHeight);
                // console.log(parseFloat(x.clientHeight / x.scrollHeight) < 1);
                if (parseFloat(x.clientHeight / x.scrollHeight) < 1) {
                    // console.log(x.scrollTop);
                    // if (x.scrollHeight - x.scrollTop === x.clientHeight) {
                    if (x.scrollHeight - x.scrollTop - x.clientHeight < 5) {
                        x.scrollTop = 0;
                    } else {
                        x.scrollTop++;
                    }
                }
            } while (true);
        },

        getNum() {
            var random = Math.floor(Math.random() * (100)) + 1
            console.log(random);
        }




    }
}




</script>

<style lang="less" scoped>
.pageCon {
    position: relative;
    width: 100%;
    height: 16.875rem;
    background-image: url(../../assets/meeting/meetingBg.png);
    background-size: 100% 100%;
    overflow: hidden;
}

.ordertitle {
    display: flex;
    align-content: center;
    justify-content: center;
    position: absolute;
    top: 2.5938rem;
    right: 1.4375rem;
    width: 5.4531rem;
    height: .4688rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: .25rem;
    color: #FFFFFF;
    text-align: center;
}

.title {
    margin: .75rem 0 0;
    width: 100%;
    text-align: center;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: .5313rem;
    color: #FFFFFF;
    // background: linear-gradient(0deg, #FFFFFF 0%, #B5F5FF 100%);
    // -webkit-background-clip: text;
    // -webkit-text-fill-color: transparent;
}

.dataBox {
    position: relative;
    left: 3.2188rem;
    top: .6875rem;
    display: flex;
    align-content: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: .3125rem;
    color: #FFFFFF;
}

.dataBox>div {
    margin-right: 5.0313rem;
    display: flex;
    flex-direction: column;
}

.dataBox>div:nth-child(2) {
    margin-right: 5.5313rem;
}

.dataBox>div>span:first-child {
    margin-bottom: .125rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: .5625rem;
    color: #00E4FF;
}


.listBox {
    position: absolute;
    right: 1.375rem;
    top: 6.5625rem;
    width: 5.9375rem;
    height: 8.8438rem;
    overflow-y: scroll;
}

.listBox>div {
    padding: .1875rem 0;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: .2813rem;
    color: #FFFFFF;
    // line-height: .75rem;
}

.listBox::-webkit-scrollbar {
    display: none;
}

.listBox>div>span:first-child {
    margin-right: .25rem;
}

.listBox>div>span:not(:first-child) {
    margin: 0 .0625rem;
    font-size: .3125rem;
    color: #00E4FF;
}

.mapBox {
    box-sizing: border-box;
    padding: .1563rem;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 5.3125rem;
    left: 3.3281rem;
    width: 13.4688rem;
    height: 9.5313rem;
    background: rgba(148, 229, 255, .1);

}

.mapBox>div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 .1563rem .1563rem;
    width: .625rem;
    height: .625rem;
    font-size: .1875rem;
    background-image: url(../../assets/meeting/yuan1.png);
    background-size: 100% 100%;
    color: #f99021;
    border-radius: 50%;
}

.activeBox {
    color: #ffffff !important;
    background-image: url(../../assets/meeting/yuan2.png) !important;
    background-size: 100% 100%;
}


// .mapBox {
//     position: absolute;
//     top: 5.75rem;
//     left: 3.625rem;
//     width: 14.2813rem;
//     height: 9.2188rem;
//     background-image: url(../../assets/meeting/map.png);
//     background-size: 100% 100%;
// }

// .box1 {
//     position: absolute;
//     top: 1.7656rem;
//     left: 3.5313rem;
//     width: 5.2188rem;
//     height: 5.875rem;
//     background: rgba(148, 229, 255, .5);
// }
.box2 {
    position: absolute;
    top: 6.0469rem;
    left: 1.5625rem;
    width: 1.9688rem;
    height: 1.5938rem;
    background: rgba(148, 229, 255, .5);

}

.popBox {
    position: absolute;
    top: 3.4688rem;
    left: 11.5625rem;
    width: 8.875rem;
    height: 10.9531rem;
    background: #030542;
    border-radius: .0938rem;
    border: .0313rem solid #00DDFF;
    background-image: url(../../assets/meeting/dia.png);
    background-size: 100% 100%;
    z-index: 50;


    animation: scaleAnmite 4s linear infinite;
    -webkit-animation: scaleAnmite 4s linear infinite;
}

.popBox>div:first-child {
    margin-top: .8125rem;
    width: 100%;
    text-align: center;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: .5313rem;
    color: #FFFFFF;
}

.diaMain {
    padding-right: .4688rem;
    position: absolute;
    top: 2.6563rem;
    left: 1.3125rem;
}

.diaMain>div {
    margin-bottom: .5625rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: .375rem;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
}

.diaMain>div>span {
    margin-top: .0625rem;
    font-size: .4063rem;
    color: #01CBE7;
}

.erCode {
    position: absolute;
    top: 0px;
    right: 30px;
    width: 130px;
    height: 130px;
    // background: antiquewhite;
    background-image: url(../../assets/meeting/code.png);
    background-size: 100% 100%;
    border-radius: 10px;
}

@keyframes scaleAnmite {
    0% {
        transform: scale(0);
    }

    1% {
        transform: scale(0.1);
    }

    2% {
        transform: scale(0.2);
    }

    3% {
        transform: scale(0.3);
    }

    4% {
        transform: scale(0.4);
    }

    5% {
        transform: scale(0.5);
    }

    6% {
        transform: scale(0.6);
    }

    7% {
        transform: scale(0.7);
    }

    8% {
        transform: scale(0.8);
    }

    9% {
        transform: scale(0.9);
    }

    10% {
        transform: scale(1);
    }

    90% {
        transform: scale(1);
    }

    91% {
        transform: scale(0.9);
    }

    93% {
        transform: scale(0.8);
    }

    94% {
        transform: scale(0.7);
    }

    95% {
        transform: scale(0.6);
    }

    96% {
        transform: scale(0.5);
    }

    97% {
        transform: scale(0.4);
    }

    98% {
        transform: scale(0.3);
    }

    99% {
        transform: scale(0.2);
    }

    100% {
        transform: scale(0);
    }
}
</style>